<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3_天气案例-watch深度监视</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
    computed和watch之间的区别：
        1.computed能完成的功能，watch都可以完成。
        2.watch能完成的功能，computed不一定能完成，
        例如：watch可以进行异步操作。

    两个重要的小原则：
        1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
        2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成简头函数，这样this的指向才是vm 或 组件实例对象。
    -->

    <!-- 准备一个容器 -->
    <div id="root">
        <h1>最佳奥斯卡得主是-{{mappingName}} !!!</h1>
        <br>
        <button @click="changeName">点此切换奥斯卡得主</button>
        <hr/>
        <h1>a的值是{{num.a}}</h1>
        <button @click="num.a++">点此让a+1</button>
        <h1>b的值是{{num.b}}</h1>
        <button @click="num.b++">点此让b+1</button>
    </div>

    <script type="text/javascript">
        let nameId = 1
        new Vue({
            el:'#root',
            data(){
                return{
                    nameId,
                    num:{
                        a:1,
                        b:1
                    }
                }
            },
            methods:{
                changeName(){
                    if(this.nameId === 1){
                        this.nameId = 2
                    }else if(this.nameId === 2) {
                        this.nameId = 3
                    }else {
                        this.nameId = 1
                    }
                }
            },
            computed:{
                mappingName() {
                    let perName;
                    if(this.nameId === 1) {
                        perName = '渣渣辉'
                    }else if(this.nameId === 2) {
                        perName = '梁家辉'
                    }else {
                        perName = '星爷'
                    }
                    return perName;
                },
                zhouYYDS() {
                    return this.nameId!==1 && this.nameId!==2
                }
            },
            watch:{
                // 待监视的属性,普通和计算类属性都可以被触发
                mappingName:{
                    // 属性发生变化时,handler被触发,并传入newData,oldData
                    handler(newD, oldD){
                    //     alert("nameId被修改了" + "之前的" + oldD +
                    // "最新的" + newD)
                    },

                    // immediate 配置值,布尔类型,初始化时让handler调用一下
                    immediate:true
                },
                num:{
                    // 启用Vue对这个值的深度监视
                    deep:true,
                    handler(newD,oldD) {
                        console.log('num:', oldD, newD);
                    }
                },
                zhouYYDS:{
                    handler(nD,oD) {
                        console.log('@zhouYYDS', nD,oD)
                        if(nD === true) {
                            alert("十年一影帝，百年周星驰")
                        }

                    }
                }
            }
        })
        // .$watch('mappingName',{
        //     handler(newD,oldD) {
        //         // alert("影帝从"+oldD+"变成了"+newD)
        //     }
        // })
    </script>
</body>

</html>